<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../lib/reset.css/reset.css">
    <style>
        .wrapper{
            height: 500px;
            width: 600px;
            margin: 0 auto;
            border: 1px solid red;
            overflow: hidden;
            position: relative;
        }
        .content li{
            height: 100px;
            border: 1px solid green;
            display: flex;
            align-items: center;
            justify-content: space-around;

        }
        img{
            width: 30%;
            height: 80%;
        }

    </style>
</head>
<body>
    <div class="wrapper">
        <ul class="content">
            <li><img src="img/1.jpg" alt=""><span>歌曲</span><span>$10</span></li>
            <li><img src="img/1.jpg" alt=""><span>歌曲</span><span>$10</span></li>
            <li><img src="img/1.jpg" alt=""><span>歌曲</span><span>$10</span></li>
            <li><img src="img/1.jpg" alt=""><span>歌曲</span><span>$10</span></li>
            <li><img src="img/1.jpg" alt=""><span>歌曲</span><span>$10</span></li>
            <li><img src="img/1.jpg" alt=""><span>歌曲</span><span>$10</span></li>
            <li><img src="img/1.jpg" alt=""><span>歌曲</span><span>$10</span></li>
            <li><img src="img/1.jpg" alt=""><span>歌曲</span><span>$10</span></li>
            <li><img src="img/1.jpg" alt=""><span>歌曲</span><span>$10</span></li>
            <li><img src="img/1.jpg" alt=""><span>歌曲</span><span>$10</span></li>
            <li><img src="img/1.jpg" alt=""><span>歌曲</span><span>$10</span></li>
        </ul>
    </div>
    <script src="../lib/better-scroll/bscroll.min.js"></script>
    <script>
        var content = document.querySelector('.content');
        var bs = new BScroll('.wrapper',{
            scrollbar: {
                            fade: true,
                            interactive: false // 1.8.0 新增
                        },
            pullDownRefresh: {
                            threshold: 50,
                            stop: 20
                        },
            pullUpLoad:{
                        threshold: 50
                       }
        })
        bs.on('pullingDown',function(){
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function(){
                if(xhr.readyState==4 && xhr.status == 200){
                    // console.log(xhr.responseText);
                    var data = JSON.parse(xhr.responseText);
                    console.log(data.channellist);
                    var str = '';
                    data.channellist.forEach(element => {
                        str += `<li><img src="${element.thumb}" alt=""><span>${element.name}</span><span>$${element.channelid}</span></li>`;
                        
                    });
                    content.innerHTML += str;
                    bs.finishPullDown();
                    bs.refresh();

                }
            }
            xhr.open('GET','https://www.easy-mock.com/mock/5d0de4f2b596d756a7afd9fb/TS/music');
            xhr.send();
        })

        bs.on('pullingUp',function(){
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function(){
                if(xhr.readyState==4 && xhr.status == 200){
                    // console.log(xhr.responseText);
                    var data = JSON.parse(xhr.responseText);
                    console.log(data.channellist);
                    var str = '';
                    data.channellist.forEach(element => {
                        str += `<li><img src="${element.thumb}" alt=""><span>${element.name}</span><span>$${element.channelid}</span></li>`;
                        
                    });
                    content.innerHTML += str;
                    bs.finishPullUp();
                    bs.refresh();

                }
            }
            xhr.open('GET','https://www.easy-mock.com/mock/5d0de4f2b596d756a7afd9fb/TS/music');
            xhr.send();
        })

    </script>
</body>
</html>